<template>
  <div class="sMine">
    <div>
      <div class="personal">
        <img src="@/assets/images/scientific/bg-my@2x.png" alt="" />
        <div>
          <img :src="person" alt="" />
          <div>
            <span>{{ userInfo.realName }}</span>
            <div class="degree">
              <span>部门:{{ userInfo.departmentName }}</span
              ><span>所属医院:{{ userInfo.hospitalName }}</span>
            </div>
            <!-- <p>用户ID {{userId}}</p> -->
          </div>
        </div>
      </div>
      <div class="content">
        <ul>
          <li>
            <img src="@/assets/images/scientific/headImg.png" alt="" />
            <span>我的论文库</span>
            <img src="@/assets/images/scientific/icon-pressed.png" alt="" />
          </li>
                    <li>
            <img src="@/assets/images/scientific/headImg.png" alt="" />
            <span>我的收藏</span>
            <img src="@/assets/images/scientific/icon-pressed.png" alt="" />
          </li>
                    <li>
            <img src="@/assets/images/scientific/headImg.png" alt="" />
            <span>资质认证</span>
            <img src="@/assets/images/scientific/icon-pressed.png" alt="" />
          </li >
           <li @click="outLogin">
            <img src="@/assets/images/scientific/headImg.png" alt="" />
            <span>退出登录</span>
            <img src="@/assets/images/scientific/icon-pressed.png" alt="" />
          </li>
        </ul>
      </div>
      <div style="height: 100px"></div>
    </div>

    <!-- <van-overlay :show="showWX" @click="showWX = false">


      </van-overlay> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import { removeStorage, setStorage } from "@/utils/auth.js";

export default {
  name: "sMine",
  components: {},
  data() {
    return {
      userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
      active: 0,
   
    };
  },
  computed: {
    ...mapGetters(["userData"]),
  },
  watch: {},
  methods: {
    outLogin() {
            this.$store.commit("user/SAVE_DATA", "");
      removeStorage("userInfo");
      removeStorage("userToken");
      removeStorage("doctorToken");
      removeStorage("lang");
      this.$router.replace({
        path: "/login",
      });
      location.reload();
    },
  },
  created() {},
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
  },
  destroyed() {},
};
</script>
<style lang='scss' scoped>
.personal {
  position: relative;
}
.personal > img {
  width: 100%;
  height: 150px;
}
.personal > div {
  position: absolute;
  top: 25px;
  left: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.personal > div img {
  width: 54px;
  height: 54px;
  border-radius: 100px;
  margin-right: 11px;

  border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.personal > div > div {
}
.personal > div > div > span {
  color: #fff;
  font-size: 17px;
  display: block;
  margin-bottom: 5px;
}
.personal > div div p {
  color: #fff;
  font-size: 12px;
  opacity: 0.6;
}
.content {
  position: relative;
  padding: 0 12px;
  margin-top: -50px;
}
.content > div,
.content > ul {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0px 4px 12px rgba(21, 24, 45, 0.04);
  margin-bottom: 10px;
  overflow: hidden;
}
.content .deposit {
  margin-top: -55px;
  padding: 19px 0;
  padding-left: 30px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content .deposit p {
  font-size: 13px;
  color: #656565;
}
.content .deposit span {
  font-size: 22px;
  font-weight: 700;
  display: block;
}
.content .deposit > button {
  border: 0;
  background: transparent;
  border-radius: 100px;
  border: 1px solid #ff6c0a;
  color: #ff6c0a;
  padding: 6px 14px;

  font-size: 14px;
}
.content .member p:nth-child(1) {
}
.content ul {
  padding: 12px 0;
}
.content ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 18px;
  font-size: 15px;
}
.content ul li span {
  width: 80%;
}
.content ul li > img {
  width: 21px;
}
.content ul li img:nth-child(3) {
  width: 13px;
}
.degree {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.degree span {
  padding: 2px 9px;
  font-size: 11px !important;
  color: #fff;
  border: 1px solid #999;
  margin-right: 4px;
  border-radius: 100px;
  background: rgba(101, 101, 101, 0.16);
  border: 1px solid rgba(51, 51, 51, 0.3);
  opacity: 0.8;
}
</style>